<template>
  <el-icon :size="20" @click="handleShowSliderMenu" class="menu-indicate">
    <Menu />
  </el-icon>
  <el-drawer v-model="drawerVisible" :size="200" :with-header="false" direction="ltr">

    <el-menu default-active="1" class="slider-menu">
      <el-menu-item index="1">
        <span>菜单1</span>
      </el-menu-item>
      <el-menu-item index="2" disabled>
        <span>菜单2</span>
      </el-menu-item>
      <el-menu-item index="3">
        <span>菜单3</span>
      </el-menu-item>
    </el-menu>
  </el-drawer>
</template>



<script lang="ts" setup>
import { Menu } from "@element-plus/icons-vue";
import { DefineComponent, defineComponent, ref } from "vue";

const drawerVisible = ref<boolean>(false);


defineComponent<DefineComponent>({
  Menu
})



function handleShowSliderMenu() {
  drawerVisible.value = true
}
</script>



<style lang="less" scoped>
.menu-indicate {
  cursor: pointer;
}

.slider-menu {
  border: none
}
</style>